<template>
  <div class="channel-edit">
    <van-cell :border="false">
        <template #title>
            <span class="title-text">我的频道</span>
        </template>
        <template #right-icon>
            <van-button type="danger" plain round size="small" class="edit-btn" 
            @click="isEdit = !isEdit">{{ isEdit ? "完成":"编辑"}}</van-button>
        </template>
    </van-cell>
    <van-grid class="my-grid">
        <van-grid-item class="grit-item" v-for="(channel, index) in myChannel" 
        :key="channel.id" 
        @click="selectMyChannelItem(channel,index)"
        >
            <template #text>
                <van-icon v-show="isEdit && !fixesChannel.includes(channel.id)" name="clear"></van-icon>
                <span class="text" :class="{active: index === isActive}" >{{ channel.name }}</span>
            </template>
        </van-grid-item>
    </van-grid>

    <!-- 推荐频道 -->
    <van-cell :border="false">
        <template #title>
            <span class="title-text">频道推荐</span>
        </template>
    </van-cell>
    <van-grid class="recommend-grid" :gutter="10">
        <van-grid-item class="grit-item" v-for="(item,index) in recommendChannelsList" 
        :key="index" :text="item.name" icon="plus" @click="addChannelItem(item)"/>
    </van-grid>
  </div>
</template>

<script>
import { GetAllChannels,AddMyChannels,DeleteMyChannels } from '@/apis/channel'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'
import { showFailToast } from 'vant';

export default {
    props: {
        myChannel: {
            type: Array,
            required: true
        },
        isActive: {
            type: Number,
            required: true
        }
    },
    created() {
        this.onLoadAllChannels();
    },
    computed: {
        ...mapState(['user']),
        recommendChannelsList() {
            const recommend = []
            this.allChannels.forEach((channels)=>{
                const res = this.myChannel.find((item)=>{
                    return item.id === channels.id
                })
                if (!res) {
                    recommend.push(channels)
                }
            })
            return recommend
        }
    },
    data() {
        return {
            allChannels:[],
            isEdit:false,
            fixesChannel:[0],//固定的频道，不允许修改
        }
    },
    methods: {
        async onLoadAllChannels() {
            const {data: res} =  await GetAllChannels();
            console.log(res.data);
            this.allChannels = res.data.channels
        },
        async addChannelItem(channel) {
            this.myChannel.push(channel)
            if (this.user) {
                try {
                    const data = await AddMyChannels({
                        id:channel.id,
                        seq:this.myChannel.length
                    })
                    console.log(data);
                } catch (error) {
                    
                }
            } else {
                setItem('TOUTIAO_CHANNEL',this.myChannel)
            }
        },
        selectMyChannelItem(channel, index) {
            if (this.isEdit) { //处于编辑状态
                if (this.fixesChannel.includes(channel.id)) {
                    return;
                }
                this.myChannel.splice(index, 1);
                if (index <= this.isActive) {
                    this.$emit('update-active',this.isActive-1,true)
                }
                this.deleteMyChannelItem(channel)
            } else { //处于正常状态
                this.$emit('update-active',index,false)
            }
        },
        async deleteMyChannelItem(channel) {
            if (this.user) {
                try {
                    const data = await DeleteMyChannels(channel)
                    console.log(data);
                } catch (error) {
                    showFailToast(error.message)
                }
            } else {
                setItem('TOUTIAO_CHANNEL',this.myChannel)
            }
        }
    },

}
</script>

<style lang="less" scoped>
.channel-edit {
    padding: 40px 0;
    .title-text {
        text-align: left;
        font-size: 16px;
        color: #333;
    }
    .edit-btn {
        width: 52px;
        height: 24px;
        font-size: 13px;
        color: #f85959;
        border: 1px solid #f85959;
    }

    :deep(.grit-item) {
        width: 80px;
        height: 43px;
        padding: 5px;
        .van-grid-item__content {
            white-space: nowrap;
            background-color: #f4f5f6;
            .van-grid-item__text, .text {
                font-size: 14px;
                color: #222;
            }
            .active {
                color: #f85959;
            }
        }
    }

    :deep(.recommend-grid) {
        .grit-item {
            .van-grid-item__content {
                flex-direction: row;
                .van-icon-plus {
                    font-size: 15px ;
                }
                .van-grid-item__text {
                    margin-top: 0;
                }
            }
        }
    }
    :deep(.my-grid) {
        .grit-item {
            .van-grid-item__content {
                .van-icon {
                    font-size: 15px;
                    position: absolute;
                    top: -4px;
                    right: -4px;
                    z-index: 2;
                    color: gray;
                }
                .van-grid-item__text {
                    margin-top: 0;
                }
            }
        }
    }
}

</style>